Nessa aula, começamos a criar a estrutura ou taxonomia dos nossos tokens de design. Eu expliquei a lógica de como criar os tokens primitivos e como vocês podem copiar e colar o nosso design system. Pontos importantes destacados na aula:

Faça uma cópia do Template de Taxonomia (Você precisa de uma conta Google): https://docs.google.com/spreadsheets/u/1/d/1u13-7WEVNsf61ZlTJkVXyaxq51cI4UHlyh2J5WWVwKA/copy​

• Uso do Template: Utilizamos uma planilha​ como fonte de verdade para facilitar alterações e ter uma visão holística dos tokens. A planilha contém colunas para nome da coleção, nome do token, valor, tipo e descrição. Além do construtor de token automático!
• Criação de Tokens Primitivos: Focamos nos tokens primitivos, que são a base da nossa coleção de tokens. Expliquei como preencher as informações de nome, valor, tipo e descrição na planilha.
• Categorias e Construtor de Tokens: A parte da categoria para frente na planilha é onde se encontra o construtor de tokens. Apenas a descrição e o valor do token precisam ser preenchidos manualmente.
• Visualização no Figma: Mostrei como visualizar e criar tokens no Figma para aqueles que preferem uma abordagem mais visual. Utilizamos o Toolkit de Design Tokens disponibilizado na aula de fundamentos para documentar as cores e criar a taxonomia.
• Estrutura de Tokens: Discutimos a importância de definir uma estrutura clara para os tokens, incluindo categorias como cores, fontes, espaço, tamanho e elevação.
• Documentação e Referências: Enfatizei a importância da documentação e forneci referências, como o artigo do Nathan Curtis, para ajudar na criação dos tokens.
• Automatização com Funções: Demonstrei como usar funções e expressões para automatizar a criação de tokens, economizando tempo e garantindo consistência.
• Criação de Paletas de Cores: Usei o exemplo de criação de uma paleta de cores n Supa Palette para mostrar como os tokens são criados e documentados no sistema.

Importante: O nome dos tokens é sensível a maiúsculas e minúsculas (case sensitive) e que normalmente mantemos tudo em caixa baixa, exceto em casos específicos.

Na próxima aula vamos explorar a criação de tokens semânticos e como referenciar cores para criar versões Light e Dark de forma eficiente. Mostrarei como extrair as variáveis do template e como adicioná-las no Figma, mantendo a planilha como a fonte de verdade para futuras alterações.